import React, { Component } from "react";
import { StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";

import { connect } from "react-redux";
import HeaderDefault from "../../components/header/HeaderDefault";

class PatorlHome extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  static navigationOptions = ({ navigation }) => ({
    header: <HeaderDefault backBtnOnPress={navigation.goBack} title="巡视" />
  });

  _ItemSection({ tietle }) {
    let iconPath;
    switch (tietle) {
      case "常规巡视":
        iconPath = require("./src/changgui.png");
        break;

      case "吸氧巡视":
        iconPath = require("./src/xuyang.png");
        break;

      case "输液巡视":
        iconPath = require("./src/shuye.png");
        break;

      default:
        iconPath = require("./src/changgui.png");
        break;
    }
    return (
      <TouchableOpacity
        onPress={() => {
          if (tietle === "常规巡视") {
            // this.props.navigation.navigate("ConventionPator", {
            //   tittle: "常规巡视"
            // });

            this.props.navigation.navigate("SignScan", {
              nextRouter: "ConventionAdd",
              qrTitle: "扫描腕带/床头卡"
            });
          } else if (tietle === "吸氧巡视") {
            this.props.navigation.navigate("SignScan", {
              nextRouter: "OxygenAdd",
              qrTitle: "扫描腕带/床头卡"
            });
          } else if (tietle === "输液巡视") {
            this.props.navigation.navigate("PatorlInfusion");
          } else {
            this.props.navigation.navigate("PatorRecord", {
              navTitle: tietle
            });
          }
        }}
      >
        <View
          style={{
            width: screenWidth,
            backgroundColor: "white",
            height: 60,
            borderBottomColor: "#efefef",
            borderBottomWidth: 1,
            paddingLeft: 15,
            flexDirection: "row",
            alignItems: "center"
          }}
        >
          <Image
            style={{ width: 60, height: 60 }}
            resizeMode="stretch"
            source={iconPath}
          />
          <Text>{tietle}</Text>
          <View style={{ flex: 1 }} />
          <Image
            resizeMode="contain"
            style={{ width: 40, height: 30 }}
            source={require("./src/iconfontjiantou5.png")}
          />
        </View>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <View
          style={{
            width: screenWidth,
            height: 40,
            backgroundColor: "#efefef",
            justifyContent: "center"
          }}
        >
          <Text style={{ paddingLeft: 15, fontSize: 14 }}>巡视执行</Text>
        </View>

        {this._ItemSection({ tietle: "常规巡视" })}
        {this._ItemSection({ tietle: "吸氧巡视" })}
        {this._ItemSection({ tietle: "输液巡视" })}
        <View
          style={{
            width: screenWidth,
            height: 40,
            backgroundColor: "#efefef",
            justifyContent: "center"
          }}
        >
          <Text style={{ paddingLeft: 15, fontSize: 14 }}>巡视记录</Text>
        </View>
        {this._ItemSection({ tietle: "常规巡视记录" })}
        {this._ItemSection({ tietle: "吸氧巡视记录" })}
        {this._ItemSection({ tietle: "输液巡视记录" })}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white"
  }
});

function select(store) {
  return {};
}

export default connect(select)(PatorlHome);
